<div id="home_new_left_panel">

    <script type="text/javascript">

        // initialise plugins
        jQuery(function() {
            jQuery('#ournav').superfish();
        });

    </script>

    <style type="text/css">


        ul#ournav li {
            position: relative;
            overflow: visible;
            z-index: 1;
        }

        li ul.submenu {
            position: absolute;
            left: 186px; /* Set 1px less than menu width */
            top: 0;
            display: none;
            overflow: visible;

        }

            /* Styles for Menu Items */
        ul.submenu li a {
            display: block;
            text-decoration: none;
            color: #003366;
            background: #fff; /* IE6 Bug */
            /*padding: 5px;*/
            border: 1px solid #ccc; /* IE6 Bug */
            border-bottom: 0;
            overflow: visible;
        }

        li.submenu2 ul li.submenu2 a{
            background: #1d4f84;
            color: white;
		}

        
        ul.level_1 li a:hover {
            text-decoration: overline;
            background: #1d4f84;
            color: white;
        }

        ul.submenu li a:hover {
            background: #1d4f84;
            color: white;
        }

            /* Holly Hack. IE Requirement \*/
        * html ul li {
            float: left;
            height: 1%;
        }

        * html ul li a {
            height: 1%;
        }

            /* End */
        a#link4menu:hover {
            text-decoration: none;
        }

        li:hover ul, li.over ul {
            display: block;
            background: #15387C;
        }

            /* The magic */

    </style>


    <div class="home_left_categories" id="home_left_categories">
        <div class="top_head">

            <div class="heading">Browse Categories</div>
        </div>
        <div class="text_catgories">

            <div class="text_catgories">

                <ul class="level_1" id="ournav">


                    <? foreach ($this->menu as $menu): ?>
                                            <? $this->menu($menu) ?>
<!--                    <li><a href="#" id="link4menu">-->
<!--                        --><?//= $menu['translation'][0]['title'] ?><!--</a>-->
<!---->
<!--                        <ul class="submenu">-->
<!--                            --><?// foreach ($menu['children'] as $children): ?>
<!---->
<!--                            <li><a href="#" id="link4menu">--><?//=$children['translation'][0]['title']?><!--</a></li>-->
<!---->
<!--                            <ul class="submenu">-->
<!--                                --><?// foreach ($children['children'] as $tretiary): ?>
<!--                                <li><a href="#" id="link4menu">--><?//=$tretiary['translation'][0]['title']?><!--</a></li>-->
<!--                                --><?// endforeach;?>
<!--                            </ul>-->
<!---->
<!--                            --><?// endforeach ?>
<!---->
<!--                        </ul>-->
<!---->
<!--                    </li>-->
<!---->
                    <? endforeach; ?>


                </ul>

            </div>


        </div>

    </div>


    <script type="text/javascript" language="javascript">
        <!--
        //hover pseudo class for <div> is not supported by IE6
        function OnMenuFolderOverSlp(elem) {
            document.getElementById('more_slppp').className = "folder_hover_level_2";
        }
        function OnMenuFolderOutSlp(elem) {
            document.getElementById('more_slppp').className = "folder_level_2";
        }
        //-->

    </script>
</div>